'use client';
import { useEffect, useRef } from 'react';
import { animate, createScope, createSpring, onScroll } from 'animejs';
import { lato, lora, roboto } from '../../components/fonts';

export default function screenServices() {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const root = useRef(null);
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const scope = useRef(null);

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    // @ts-ignore
    scope.current = createScope({ root }).add(self => {
      // Every anime.js instances declared here are now scopped to <div ref={root}>

      // Created a bounce animation loop
      animate('.service-item', {
        scale: [
          { to: 1, ease: 'inOut(3)' },
          // { to: 1, ease: createSpring({ stiffness: 300 }) },
        ],
        // loop: true,
        // loopDelay: 250,
        autoplay: onScroll({
          container: '.screen-service-cot',
          enter: 'bottom top-=200',
          leave: 'top+=780 bottom',
          sync: true,
          // debug: true,
        }),
      });
    });

    // Properly cleanup all anime.js instances declared inside the scope
    // @ts-ignore
    return () => scope.current.revert();
  }, []);

  return (
    <div className={`screen-service-cot bg-[#F6F8FA] pb-16`} ref={root}>
      <div className={'flex flex-col items-center justify-center py-20'}>
        <h1
          className={`${lato.className} text-[34px] font-medium text-[#222] uppercase`}
        >
          A cohesive platform for your team
        </h1>
        <p className={`font-sans text-[18px] font-light text-[#2f2f2f]`}>
          We provide end-to-end services to oversee the entire collaboration
          process
        </p>
      </div>
      {/*------------------------------>*/}
      <div className="mx-auto flex max-w-7xl flex-col gap-5 md:flex-row">
        <div className={'flex flex-col gap-5 self-stretch md:flex-1'}>
          <div className={'flex flex-1 flex-col gap-5 md:flex-row'}>
            <div
              style={{ transform: 'scale(0.5)' }}
              className={
                'service-item flex min-h-[216px] flex-2 items-center justify-center rounded-xl bg-[url(/opration.png)] bg-cover bg-center bg-no-repeat'
              }
            >
              <div
                className={`w-full bg-black/20 py-2 text-center text-[24px] font-semibold text-white uppercase ${roboto.className} text-nowrap overflow-ellipsis`}
              >
                Operation
              </div>
            </div>

            <div
              style={{ transform: 'scale(0.5)' }}
              className={
                'service-item flex min-h-[216px] flex-2 items-center justify-center rounded-xl bg-[url(/pm@2x.png)] bg-cover bg-center bg-no-repeat'
              }
            >
              <div
                className={`w-full bg-white/20 py-2 text-center text-[24px] font-semibold text-white uppercase ${roboto.className} text-nowrap overflow-ellipsis`}
              >
                project management
              </div>
            </div>
            <div
              style={{ transform: 'scale(0.5)' }}
              className={
                'service-item flex min-h-[216px] flex-3 items-center justify-center rounded-xl bg-[url(/logistic@2x.png)] bg-cover bg-center bg-no-repeat'
              }
            >
              <div
                className={`w-full bg-black/20 py-2 text-center text-[24px] font-semibold text-white uppercase ${roboto.className} text-nowrap overflow-ellipsis`}
              >
                Logistics
              </div>
            </div>
          </div>
          <div className={'flex flex-1 flex-col gap-5 md:flex-row'}>
            <div
              style={{ transform: 'scale(0.5)' }}
              className={
                'service-item flex min-h-[216px] flex-1 items-center justify-center rounded-xl bg-[url(/solar.jpg)] bg-cover bg-center bg-no-repeat'
              }
            >
              <div
                className={`w-full bg-black/25 py-2 text-center text-[24px] font-semibold text-white uppercase ${roboto.className} text-nowrap overflow-ellipsis`}
              >
                Customer
              </div>
            </div>
            <div
              style={{ transform: 'scale(0.5)' }}
              className={
                'service-item flex min-h-[216px] flex-1 items-center justify-center rounded-xl bg-[url(/vendor.png)] bg-cover bg-center bg-no-repeat'
              }
            >
              <div
                className={`w-full bg-black/25 py-2 text-center text-[24px] font-semibold text-white uppercase ${roboto.className} text-nowrap overflow-ellipsis`}
              >
                Vendor
              </div>
            </div>
            <div
              style={{ transform: 'scale(0.5)' }}
              className={
                'service-item flex min-h-[216px] flex-1 items-center justify-center rounded-xl bg-[url(/sourcing@2x.png)] bg-cover bg-center bg-no-repeat'
              }
            >
              <div
                className={`w-full bg-black/25 py-2 text-center text-[24px] font-semibold text-white uppercase ${roboto.className} text-nowrap overflow-ellipsis`}
              >
                SOURCING
              </div>
            </div>

            <div
              style={{ transform: 'scale(0.5)' }}
              className={
                'service-item flex min-h-[216px] flex-1 items-center justify-center rounded-xl bg-[url(/sales@2x.png)] bg-cover bg-center bg-no-repeat'
              }
            >
              <div
                className={`w-full bg-black/20 py-2 text-center text-[24px] font-semibold text-white uppercase backdrop-blur-[1px] ${roboto.className} text-nowrap overflow-ellipsis`}
              >
                Sales
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
